<template>
<!--  TODO 求购详情 -->
  <el-dialog title="求购详情" v-model="drawer" width="680px" @close="close">
    <el-table :data="tableList" size="small" class="table-box" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
      <el-table-column prop="name" label="产品名称"/>
      <el-table-column prop="model" label="详情/规格型号"/>
      <el-table-column prop="number" label="数量"/>
      <el-table-column prop="remark" label="需求描述/备注"/>
    </el-table>
    <template #footer>
      <el-row class="foot">
        <el-col :span="7">
          <div class="foot-item">
            <el-checkbox v-model="detailsForm.isPublicDemand" @change="changPublicDemand" label="把需求公开到找资源" size="small" />
            <el-tooltip effect="light" content="默认公开" placement="top-start">
              <el-icon style="font-size:16px;position: relative;top:4px;left:6px;color: #4BAF19FF"><ele-QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="foot-item">
            <el-checkbox v-model="detailsForm.isTopping" @change="changTopping" label="消息置顶" size="small" />
          </div>
        </el-col>
        <el-col :span="10">
          <div class="foot-item">
            <span class="foot-item-title">公开联系方式</span>
            <el-radio-group v-model="detailsForm.publicContact" @change="changPublicContact" size="small">
              <el-radio-button label="0" >17聊账号</el-radio-button>
              <el-radio-button label="1" >手机号</el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import {reactive, toRefs, ref, computed} from 'vue'

export default {
  name: "BuyDetails",
  props: {
    dialogDrawer: {
      type: Boolean,
      default: false
    },
    defaultId: {
      type: String,
      default: null
    }
  },
  setup(props, context) {
    const { dialogDrawer, defaultId } = toRefs(props)
    const drawer = computed({
      get: () => {
        if (dialogDrawer.value) {

        }
        return dialogDrawer.value
      },
      set: val => context.emit('update:dialogDrawer', val)
    })
    const state = reactive({
      tableList:[
        {
          name:"Z790 HERO",
          model:"详情",
          number:"100张",
          remark:"无"
        }
      ],
      detailsForm:{
        isPublicDemand:true,
        isTopping:false,
        publicContact:'1',  //0->17聊账号 1->手机号
      },

    })

    // 关闭
    const close = () => {
      context.emit('update:dialogDrawer', false)
    }

    //修改是否公开到找资源
    const changPublicDemand = (val) => {

    }

    //修改是否消息置顶
    const changTopping = (val) => {

    }

    //修改公开联系方式
    const changPublicContact = (val) => {

    }

    return{
      drawer,
      ...toRefs(state),
      close,
      changPublicDemand,
      changTopping,
      changPublicContact,

    }

  }
}
</script>

<style scoped lang="scss">
.foot{
  .foot-item{
    display: flex;
    justify-content: center;

    .foot-item-title{
      font-size: 12px;
      position: relative;
      top: 3px;
      margin-right: 5px;
    }
  }
}
</style>
